<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dangerous{
            padding:14px 0;
            text-align: center;
            background-color: crimson;
            color:#fff
        }
        .box{
            border-radius: 5px;
            border: 1px solid #cdcdcd;
        }
        .my{
            color:indigo
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <form action="">
            用户名: <input type="text" v-model="user.name">
            密码: <input type="password" v-model="user.pwd" v-on:keyup.13="submit"/>
        </form>
        <!-- <img src="img/1.jpg" alt=""> -->
        <img v-bind:src="imgSrc" alt="">
        <button @click="change('last')">last</button>
        <button @click="change()">周雄</button>

        <div :class="{dangerous:isdangerous,size:isSize}">信息弹出框</div>

        <div :style="{color:myColor}" v-show="flag">last闭嘴</div>

        <div :class="[classA,classB]" v-if="flag">HAPPY</div>

        <div v-if="num == 1">
            1
        </div>
        <div v-else-if="num == 2">
            2
        </div>
        <div v-else>
            既不是1也不是2
        </div>

        <h4>分数评分表</h4>
        <input type="text" v-model="name">
        <div v-if="name == '黄晓明'">
            杨颖
        </div>
        <!-- <div v-if="name == '范冰冰'">
            范冰冰的老公是李晨
        </div> -->
        <!-- <div v-else-if="name == '孙俪'">
            孙俪的老公是邓超
        </div>
        <div v-else>
            黄晓明的老公是AB
        </div> -->

    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'黄晓明',
            num:21,
            flag:true,
            isdangerous:true,
            isSize:true,
            myColor:'green',
            user:{
                name:'last',
                pwd:123
            },
            imgSrc:'img/wolf.jpg',
            classA:'box',
            classB:'my'
        },
        methods: {
            submit(){
                alert(this.user.name+'\n'+this.user.pwd)
            },
            change(arg){
                if(arg){
                    this.imgSrc = "img/1.jpg"
                }else{
                    this.imgSrc = "img/wy.jpg"
                }
                
            }
        },
    })
</script>
</html>